<template>
  <div class="superAdmin">
    <div class="title">超管管理</div>
    <div class="table">
      <el-table :data="tableData" border stripe style="width: 100%">
        >
        <template slot="empty">
          <el-empty description="暂无超管">
            <el-button type="primary" @click="addDialogShow = true">添加超管</el-button>
          </el-empty>
        </template>
        <el-table-column align="center" prop="userId" label="ID">
        </el-table-column>
        <el-table-column align="center" prop="userName" label="姓名">
        </el-table-column>
        <el-table-column align="center" prop="phone" label="手机号码">
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="edit(scope.row)">编辑</el-button>
            <el-button type="text" size="small" @click="openSetFn(scope.row)">授权</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="btn">
        <el-button type="primary" @click="$router.push('/sys/tenant')">返回</el-button>
      </div>
    </div>

    <!-- 添加超管 -->
    <div class="dialog2">
      <el-dialog @close="closeAdd" title="添加超管" :visible.sync="addDialogShow" width="30%">
        <el-form label-position="right" :model="addForm" :rules="rules" ref="addForm" label-width="100px"
          class="demo-ruleForm">
          <el-form-item label="用户名" prop="userName">
            <el-input v-model="addForm.userName" clearable placeholder="请输入用户名"></el-input>
          </el-form-item>
          <el-form-item label="手机号码" prop="phone">
            <el-input v-model="addForm.phone" clearable placeholder="请输入手机号码"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="addForm.password" clearable show-password placeholder="请输入密码"></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="surePassword">
            <el-input v-model="addForm.surePassword" clearable show-password placeholder="请确认密码"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="closeAdd">取 消</el-button>
          <el-button type="primary" @click="addFn">确 认</el-button>
        </span>
      </el-dialog>
    </div>
    <!-- 编辑超管 -->
    <div class="dialog2">
      <el-dialog title="编辑超管" :visible.sync="editDialogShow" width="30%">
        <el-form label-position="right" :model="editForm" :rules="rules" ref="editForm" label-width="100px"
          class="demo-ruleForm">
          <el-form-item label="用户名" prop="userName">
            <el-input v-model="editForm.userName" clearable placeholder="请输入用户名"></el-input>
          </el-form-item>
          <el-form-item label="手机号码" prop="phone">
            <el-input v-model="editForm.phone" clearable placeholder="请输入手机号码"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="editDialogShow = false">取 消</el-button>
          <el-button type="primary" @click="editFn">确 定</el-button>
        </span>
      </el-dialog>
    </div>
    <!-- 授权 -->
    <div class="dialog3">
      <el-dialog title="资源授权" :before-close="handleClose" :destroy-on-close="true" :visible.sync="dialogSet" width="50%">
        <div class="left">
          <el-input placeholder="输入关键字进行过滤" clearable v-model="filterText">
          </el-input>
          <el-tree node-key="id" show-checkbox default-expand-all class="filter-tree" :data="menuList"
            :default-checked-keys="own" :check-strictly="true" :expand-on-click-node="false" @node-click="change"
            @check="change" :props="defaultProps" :check-on-click-node="true" highlight-current
            :filter-node-method="filterNode" ref="tree">
          </el-tree>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" @click="setFn">保 存</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  getAdminApi,
  postAdminApi,
  putAdminApi,
  getRoleApi,
  setRoleApi,
} from "../../../api/system/tenant";
export default {
  data() {
    var checkpass1 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.addForm.password) {
        callback(new Error("两次输入密码不一致，请重新确认！"));
      } else {
        callback();
      }
    };
    return {
      id: null,
      tableData: [],
      addDialogShow: false,
      editDialogShow: false,
      addForm: {
        password: "",
        phone: "",
        surePassword: "",
        userName: "",
      },
      editForm: {
        phone: "",
        userId: "",
        userName: "",
      },
      rules: {
        userName: [
          {
            required: true,
            message: "请输入用户名",
            trigger: ["blur", "change"],
          },
          {
            min: 3,
            max: 10,
            message: "请输入3-10位用户名",
            trigger: ["blur", "change"],
          },
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: ["blur", "change"],
          },
          {
            min: 6,
            max: 15,
            message: "请输入6-15位密码",
            trigger: ["blur", "change"],
          },
        ],
        surePassword: [
          {
            required: true,
            message: "请再次输入密码",
            trigger: ["blur", "change"],
          },
          { validator: checkpass1, trigger: ["blur", "change"] },
        ],
        phone: [
          {
            required: true,
            message: "请输入手机号码",
            trigger: ["blur", "change"],
          },
          {
            min: 11,
            max: 11,
            message: "请输入11位的手机号码",
            trigger: ["blur", "change"],
          },
        ],
      },
      loading: false,
      dialogSet: false,
      filterText: "",
      defaultProps: {
        children: "children",
        label: "menuName",
      },
      menuList: [],
      own: [],
    };
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
  created() {
    this.id = this.$route.query.eidtId;
    this.getAdmin(this.$route.query.eidtId);
  },
  methods: {
    change(e, d) {
      if (d.checkedKeys) {
        if (d.checkedKeys.indexOf(e.id) > -1) {
          d.checked = true;
        } else {
          d.checked = false;
        }
      }
      if (d.checked == true && e.children && e.children.length !== 0) {
        this.own.push(e.id);
        e.children.forEach((item) => {
          this.own.push(item.id);
          if (item.children && item.children.length !== 0) {
            item.children.forEach((it) => {
              this.own.push(it.id);
            });
          }
        });
        this.own = [...new Set(this.own)];
        this.$refs.tree.setCheckedKeys(this.own);
      } else if (d.checked == false && e.children && e.children.length !== 0) {
        if (this.own.indexOf(e.id) > 0) {
          this.own.splice(this.own.indexOf(e.id), 1);
        }
        e.children.forEach((item) => {
          if (this.own.indexOf(item.id) > 0) {
            this.own.splice(this.own.indexOf(item.id), 1);
          }
          if (item.children && item.children.length !== 0) {
            item.children.forEach((it) => {
              if (this.own.indexOf(it.id) > 0) {
                this.own.splice(this.own.indexOf(it.id), 1);
              }
            });
          }
        });
        this.own = [...new Set(this.own)];
        this.$refs.tree.setCheckedKeys(this.own);
      } else if (d.checked == false && e.children.length == 0) {
        if (this.own.indexOf(e.id) > 0) {
          this.own.splice(this.own.indexOf(e.id), 1);
        }
        this.own = [...new Set(this.own)];
        this.$refs.tree.setCheckedKeys(this.own);
      } else if (d.checked == true && e.children.length == 0) {
        this.own.push(e.id);
        this.own = [...new Set(this.own)];
        this.$refs.tree.setCheckedKeys(this.own);
      }
    },
    // 关闭添加 对话框
    closeAdd() {
      this.addDialogShow = false;
      this.addForm = {
        password: "",
        phone: "",
        surePassword: "",
        userName: "",
      };
    },
    getAdmin(id) {
      getAdminApi(id).then((res) => {
        if (res.code == 200) {
          if (res.data) {
            this.tableData = [];
            this.tableData.push(res.data);
          }
        }
      });
    },
    //   确认添加超管
    addFn() {
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          postAdminApi(this.id, this.addForm).then((res) => {
            if (res.code == 200) {
              this.$message.success("添加成功!");
              this.getAdmin(this.id);
              this.closeAdd();
            }
          });
        } else {
          this.$message.error("填写有误!请填写正确后重新尝试");
        }
      });
    },
    //打开编辑超管
    edit(e) {
      this.editForm = JSON.parse(JSON.stringify(e));
      this.editDialogShow = true;
    },
    // 确认编辑超管
    editFn() {
      this.$refs.editForm.validate((valid) => {
        if (valid) {
          putAdminApi(this.id, this.editForm).then((res) => {
            if (res.code == 200) {
              this.$message.success("修改成功!");
              this.getAdmin(this.id);
              this.editDialogShow = false;
            }
          });
        } else {
          this.$message.error("填写有误!请填写正确后重新尝试");
        }
      });
    },
    // 给角色分配菜单
    setFn() {
      const checkData = this.$refs.tree.getCheckedNodes();
      let arr = {
        menuIds: [],
      };
      checkData.forEach((item) => {
        arr.menuIds.push(item.id);
      });
      setRoleApi(this.id, arr).then((res) => {
        if (res.code == 200) {
          this.getRoles();
          this.$message.success("操作成功!");
        }
      });
    },
    // 获取菜单信息
    getRoles() {
      this.loading = true;
      getRoleApi(this.id).then((res) => {
        if (res.code == 200) {
          this.menuList = res.data;
          this.menuList[0].disabled = true;
          this.own = [this.menuList[0].id];
          this.menuList.forEach((item) => {
            if (item.own == true) {
              this.own.push(item.id);
            }
            if (item.children.length !== 0) {
              item.children.forEach((it) => {
                if (it.own == true) {
                  this.own.push(it.id);
                }
                if (it.children.length !== 0) {
                  it.children.forEach((itt) => {
                    if (itt.own == true) {
                      this.own.push(itt.id);
                    }
                  });
                }
              });
            }
          });
          this.loading = false;
        }
      });
    },
    // 打开资源授权
    openSetFn(row) {
      this.dialogSet = true;
      this.getRoles();
    },
    // 取消
    handleClose() {
      this.dialogSet = false;
    },
    // 过滤筛选
    filterNode(value, data) {
      if (!value) return true;
      return data.menuName.indexOf(value) !== -1;
    },
  },
};
</script>

<style lang="scss" >
.superAdmin {
  width: 100%;
  height: calc(100vh - 100px);
  padding: 25px;

  .table {
    margin-top: 100px;
  }

  .title {
    font-size: 30px;
    font-weight: bold;
    position: absolute;
    top: 80px;
    left: 30px;
  }

  .btn {
    margin: 30px;
    float: right;
  }

  .dialog3 {
    .el-dialog {
      .el-dialog__body {
        overflow: auto;
        height: 500px;
      }
    }
  }
}
</style>